<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM操作</title>
	</head>
	<body>
		<!-- <input type="text" name="demo" id="demo" value="demo" /> -->
		
		<!-- <div></div>
		<div class="demo"></div>
		<div></div>
		<p></p> -->
		
		<!-- <div><strong></strong></div>
		<div><span><strong class="demo">123</strong></span></div> -->
		
		<!-- <div>
			<span></span>
			<div>
				<p></p>
			</div>
		</div> -->
		<div>
			123
			<!-- This is comment -->
			<strong></strong>
			<span></span>
		</div>
		<script type="text/javascript">
			/*
			 document 代表整个文档
			 document.getElementById()//元素id在ie8一下浏览器不区分大小写。
										兼容匹配name属性元素
			 getElementsByTagName()//标签名
			 getElementByName()//只有部分标签name可生效表单
			 getElementsByClassName()
			 
			 querySelector()//css选择器、在ie7以及一下没哟  选择副本
			 querySelectorAll()//同上
			 */
			
			/* var p = document.getElementsByClassName('demo')[0]; */
			/* var strong = document.querySelector('div > span > strong'); */
			
			
			//节点树选择
			/*
			遍历节点树
			parentNode >父节点（最顶端的parentNode为#document）
			childNodes-->子节点们
			firstChild -->第一个子节点
			lastChild -->最后一个子节点
			nextSibling -->后一个兄弟节点
			previousSibling-->前一个兄弟节点
			* /
			
			/*
			基于元素节点树的遍历  children之外ie9一下不支持
			parentElement-->返回当前元素的父元素节点（IE不兼容）
			children-->只返回当前元素的元素子节点
			node.childElementCount
			firstElementChild
			lastElementChild
			nextElementSibling
			previousElementSibling
			*/
		   
		   /*
		   节点属性4
		   nodeName 元素的标签名以瞎写形式表示，只读
		   nodeValue Text节点或者Comment节点的文本内容可读写
		   nodeType该节点的类型，只读 元素节点-->1  属性节点-->2
					文本节点-->3  注释节点-->8  document-->9
					DocumentFragment -->11
		   attribute
		   
		   hasChildNoeds()
		   */
		   
		   var div = document.getElementsByTagName('div')[0];
			
		</script>
		
		
		
	</body>
</html>
